<template>
    <div v-loading="loading" style="width: 100%;">
        <!-- 审批弹窗 -->
        <FormDialog v-if="audit" ref="auditDialog" :title="dialogTitle" :items="formItems" :rules="dialogRules" :form.sync="dialogForm" :visible.sync="dialogVisible" @submit="handleAudit" />
        <SavePage :title="audit ? (approval ? `${number}批复` : `${number}审核`) : number">
            <!-- 审批页不显示这个 -->
            <div v-if="!audit" slot="title">
                <span class="text">制表：{{ form.tabulationName }}</span>
                <span class="text">负责人：{{ form.principalName }}</span>
                <span class="text">上级批复：{{ form.higherPrincipalName }}</span>
            </div>
            <!-- 审批显示操作按钮 -->
            <template v-else slot="buttons">
                <BaseButton @click="showDialog('1')">同意</BaseButton>
                <BaseButton type="danger" @click="showDialog('2')">驳回</BaseButton>
            </template>

            <template slot="body">
                <!-- 上级批复页要输入审核和上级 -->
                <ApprovalForm v-if="approval" slot="approval" ref="approvalForm" :form.sync="approvalForm" />

                <!-- 审批进度条 -->
                <!-- 审批页不显示这个 -->
                <ApprovalSteps v-if="!audit" :number="number" />

                <!-- 审批显示内容 -->
                <template v-else>
                    <TitleTips title="基础信息" />
                    <el-row class="box" :gutter="24">
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">公路名称：</span>
                            <span class="value">{{ form.highwayName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">周期：</span>
                            <span class="value">{{ form.cycle }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">路线长度：</span>
                            <span class="value">{{ form.routeLength }}km</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">制表：</span>
                            <span class="value">{{ form.tabulationName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">负责人：</span>
                            <span class="value">{{ form.principalName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">管理机构：</span>
                            <span class="value">{{ form.orgDept }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">上级批复：</span>
                            <span class="value">{{ form.higherPrincipalName }}</span>
                        </el-col>
                        <el-col :xl="6" :lg="8" class="item">
                            <span class="label">上报时间：</span>
                            <span class="value">{{ form.reportTime }}</span>
                        </el-col>
                    </el-row>
                </template>

                <!-- 审核通过的才显示百分比 -->
                <CostProgress v-if="!audit && form.isPass" :cost="cost" :title="costProgressTitle" />

                <div class="base-info">
                    <template v-if="!audit">
                        <div class="period">{{ form.cycle }}</div>
                        <div class="road">{{ form.highwayName }}公路，{{ form.routeLength }}km</div>
                     </template>
                    <!-- 为了加上面的boder横线 -->
                    <div v-else class="road" />

                    <el-row :gutter="24">
                        <el-col :span="8" class="item">
                            <span class="label">日常养护费用：</span>
                            <span class="value">{{ form.dailyMoney }}元</span>
                        </el-col>
                        <el-col :span="8" class="item">
                            <span class="label">专项工程费用：</span>
                            <span class="value">{{ form.specialMoney }}元</span>
                        </el-col>
                        <el-col :span="8" class="item">
                            <span class="label">合计：</span>
                            <span class="value">{{ form.total }}元</span>
                        </el-col>
                    </el-row>
                </div>
                <div class="tabs">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="日常养护" name="first" />
                        <el-tab-pane label="专项工程" name="second" />
                    </el-tabs>
                    <div v-loading="tabLoading" class="loading-wrap">
                        <div v-if="activeName === 'first'">
                            <ItemCard :list="EverydayList" />
                        </div>
                        <div v-if="activeName === 'second'">
                            <ItemCard :list="specialList" />
                        </div>
                    </div>
                </div>
            </template>
         </SavePage>
    </div>
</template>

<script>
import { PlanImpleModel, RoadPlanModel } from '@/models' 
import ItemCard from './components/ItemCard'
import auditApproval from '@/views/expense-plan/mixins/audit-approval'
import CostProgress from '@/views/expense-plan/components/CostProgress'

export default {
    name: 'PlanMaintenanceDetail',
    components: {
        ItemCard,
        CostProgress
    },
    mixins: [auditApproval],
    data() {
        return {
            model: new PlanImpleModel(),
            roadPlanModel: new RoadPlanModel(),
            form: {
                contentList: []
            },
            number: null,
            loading: true,
            activeName: 'first',
            everydayDetail: [],
            EverydayList: [],
            specialList: [],
            specialDetail: [],
            tabLoading: true,
            planNumber: null,
            planDetail: {},
            cost: {},
            costProgressTitle: ''
        }
    },
    async created() {
        this.getQuery()
        this.number && await this.getDetail()
        await Promise.all([this.getEverydayDetail(), this.getPlanDetail()])
        this.setEverydayList()
    },
    methods: {
        getQuery() {
            this.number = this.$route.query.number
            this.planNumber = this.$route.query.planNumber
            this.planType = Number(this.$route.query.planType || 1)
        },
        getDetail() {
            return this.model.detail({ number: this.number }, true).then(res => {
                this.form = res
                this.cost = {
                    a: res.dailyMoney,
                    b: res.dailyMoneyPlan,
                    c: res.specialMoney,
                    d: res.specialMoneyPlan
                }
                this.costProgressTitle = res.cycle.split('年')[1] + '完成计划情况'
            }).finally(() => {
                this.loading = false
            })
        },
        getPlanDetail() {
            return this.roadPlanModel.getMonthPlanDetail({ number: this.planNumber }, true).then(res => {
                this.planDetail = res
            }).finally(() => {
                this.loading = false
            })
        },
        // 拼接日常养护实施列表
        setEverydayList() {
            // 日常养护
            this.EverydayList = this.planDetail.dailyList.map(item => {
                let obj = {
                    planId: item.id,
                    projectName: item.projectName,
                    jobAreaName: item.jobAreaName,
                    prepareCompletionMoney: item.prepareCompletionMoney,
                    workAmount: item.workAmount,
                    arithmeticalUnit: item.arithmeticalUnit
                }
                // 如果日常详情列表有，则找到对应的匹配上
                if (this.everydayDetail.length > 0) {
                    this.everydayDetail.some(m => {
                        if (m.planId === item.id) {
                            obj = Object.assign(obj, m)
                            return true
                        }
                    })
                }
                return obj
            })
        },
        // 拼接专项工程实施列表
        setSpecialList() {
            // 专项工程
            this.specialList = this.planDetail.specialList.map(item => {
                let obj = {
                    planId: item.id,
                    projectName: item.projectName,
                    prepareCompletionMoney: item.prepareCompletionMoney
                }
                if (this.specialDetail.length > 0) {
                    this.specialDetail.some(m => {
                        if (m.planId === item.id) {
                            obj = Object.assign(obj, m)
                            return true
                        }
                    })
                }
                return obj
            })
        },
        // 获取日常费用详情
        getEverydayDetail() {
            return this.model.getEverydayDetail(this.number, true).then(res => {
                this.everydayDetail = res.list
            }).finally(() => {
                this.tabLoading = false
            })
        },
        // 获取专项工程费用详情
        getSpecialDetail() {
            return this.model.getSpecialDetail(this.number, true).then(res => {
                this.specialDetail = res.list
            }).finally(() => {
                this.tabLoading = false
            })
        },
        async handleClick() {
            this.tabLoading = true
            switch (this.activeName) {
                case 'first':
                    await this.getEverydayDetail()
                    this.setEverydayList()
                    break
                case 'second':
                    await this.getSpecialDetail()
                    this.setSpecialList()
                    break
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.steps {
    width: 100%;
    max-width: 900px;
    margin: 16px 0 32px;
}
.progress {
    font-size: 14px;
    color: #171725;
    width: 100%;
    max-width: 900px;
    ::v-deep .el-progress {
        margin: 0 8px;
        flex: 1;
    }
    .item {
        align-items: center !important;
        .label {
            font-weight: normal !important;
        }
        .value {
            color: #44444F;
        }
    }
    .title {
        margin-bottom: 16px;
        font-weight: bold;
    }
}
.base-info {
    .period {
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: bold;
        color: #171725;
    }
    .road {
        font-size: 14px;
        color: #44444F;
        padding-bottom: 15px;
        margin-bottom: 32px;
        border-bottom: 1px solid #F0F4F7;
    }
    .item {
        margin-bottom: 24px !important;
    }
}
.loading-wrap {
    width: 100%;
    min-height: 200px;
    overflow: hidden;
}
</style>
